import React from 'react';
import { Modal, Form, Select, Input, Message } from 'antd';
import UploadList from '@/components/UploadList';
import { useEffect, useState } from 'react';
import API from '@/api/cyindex';
import { goBack } from '@/utils/util';
import { useModel } from 'umi';
const { TextArea } = Input;

const CreateModal = ({ onCancel, visible, initList, state }) => {
  const [form] = Form.useForm();
  const { initialState } = useModel('@@initialState');
  const { username, userId } = initialState.info;
  console.log('initlist', initList);
  const formItemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 16,
    },
  };

  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };

  const init = () => {
    console.log('initList', initList);
    if (initList) {
      console.log('初始数据');
      form.setFieldsValue({
        disposalName: username,
        disposalPhone: initList.phone,
      });
    }
  };
  useEffect(() => {
    visible && init();
  }, [visible]);

  return (
    <Modal
      visible={visible}
      title="处置"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      maskClosable={false}
      destroyOnClose
      onOk={() => {
        form.validateFields().then((values) => {
          values.disposalId = userId;
          values.id = state.id;
          values.readState = 1;
          API.modAlarmDisposal(values).then((res) => {
            if (res) {
              Message.success('处置成功');
              goBack();
            }
          });
        });
      }}
    >
      <Form
        form={form}
        {...formItemLayout}
        name="form_in_modal"
        preserve={false}
      >
        <Form.Item label="处置人" name="disposalName">
          <Input disabled />
        </Form.Item>
        <Form.Item label="联系方式" name="disposalPhone">
          <Input disabled />
        </Form.Item>
        <Form.Item
          label="处置结果"
          name="disposeState"
          rules={[{ required: true, message: '请选择处置结果' }]}
        >
          <Select>
            <Select.Option value={1}>处置完成</Select.Option>
            <Select.Option value={2}>忽略</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="处置说明" name="disposalAdress">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="附件信息"
          extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
          name="alarmFileList"
          className="block"
        >
          <UploadList
            uploadUrl="/alarm/fileUpload"
            downloadUrl="/alarm/download"
            options={uploadOptions}
          ></UploadList>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateModal;
